<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <el-tabs type="border-card">

            <el-tab-pane label="医院信息添加">
                <el-form ref="addForm" :model="addForm" label-width="80px">
                    <el-form-item label="医院名称">
                        <el-input v-model="addForm.hosname"
                                  autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="医院编号">
                        <el-input v-model="addForm.hoscode"
                                  autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="医院logo">
                        <input type="file" name="file" id="file"
                                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                    </el-form-item>
                    <el-form-item label="医院类型">
                        <el-select v-model="addForm.hostype" placeholder="请选择医院类型">
                            <el-option label="三级甲等" value="10001"></el-option>
                            <el-option label="三级乙等" value="10002"></el-option>
                            <el-option label="二级甲等" value="10003"></el-option>
                            <el-option label="二级乙等" value="10004"></el-option>
                            <el-option label="一级" value="10005"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="医院区域">
                        <el-cascader v-model="baseAddress" :options="options" @change="handleChange">

                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input type="textarea" v-model="addForm.address"
                                  autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="坐车路线">
                        <el-input type="textarea" v-model="addForm.route"
                                  autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="医院简介">
                        <el-input type="textarea" v-model="addForm.intro"
                                  autocomplete="on"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="预约规则添加">
                <el-form :model="bookingRule" label-width="80px">
                    <el-form-item label="预约周期">
                        <el-select v-model="bookingRule.cycle" placeholder="请选择预约周期">
                            <el-option :label="item + '天'" :value="item"
                                v-for="item in 30" :key="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约时间">
                        <el-time-picker
                                is-range
                                v-model="value"
                                value-format="HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                        </el-time-picker>
                    </el-form-item>
                    <el-form-item label="退号截止">
                        <el-select v-model="bookingRule.quitDay" placeholder="请选择预约周期">
                            <el-option label="当天" :value="'0'"></el-option>
                            <el-option label="预约前一天" :value="'-1'"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="取号地点">
                        <el-input type="textarea" v-model="bookingRule.fetchAddress"
                                  autocomplete="on"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-tabs>
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 添加的总对象
            addForm: {},
            // 三级联动数据对象
            options: [],
            // 省市区选择
            baseAddress: [],
            // 规则对象
            bookingRule: {},
            value:  [new Date(2022, 3, 1, 8, 30), new Date(2022, 3, 1, 17, 30)],
        },
        methods: {
            // 提交的方法
            onSubmit() {
                let formData = new FormData();
                let file = document.getElementById("file").files[0];
                formData.append("file",file)
                this.addForm.signKey = sessionStorage.getItem("signKey")
                this.bookingRule.releaseTime = this.value[0]
                this.bookingRule.stopTime = this.value[1]
                this.addForm.bookingRule = this.bookingRule
                this.$confirm('请确认好信息是否填写正确，是否继续提交?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 先将文件上传
                    axios.post(`/hospitalSet/receiveFile`,formData).then( ({data}) => {
                        if (data.code == 200) {
                            this.addForm.logoData = data.data
                            console.log(this.addForm)
                            axios.post(`/hospitalSet/saveHospital`,this.addForm).then( ({data}) => {
                                if (data.code == 200) {

                                    this.$message({
                                        type: 'success',
                                        message: '提交成功!'
                                    })
                                } else {
                                    this.$message.error("提交失败，请稍后再试")
                                }
                            }).catch( e => {
                                this.$message.error("提交失败，请稍后再试")
                            })
                        } else {
                            this.$message.error("提交失败，请稍后再试")
                        }
                    }).catch( e => {
                        this.$message.error("提交失败，请稍后再试")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    })
                })
            },
            // 省市区三级联动选择的值
            handleChange(value) {
                this.addForm.provinceCode = value[0]
                this.addForm.cityCode = value[1]
                this.addForm.districtCode = value[2]
            },
            // 填充医院信息，方便做修改
            getHospitalInfo () {
                // 取出条件
                let obj = {
                    hoscode : sessionStorage.getItem("hoscode"),
                    signKey : sessionStorage.getItem("signKey")
                }
                axios.post(`/hospitalSet/showHospital`, obj).then( ({data}) => {
                    if (data.code == 200) {
                        this.addForm = data.data
                        // 设置基本路径
                        this.baseAddress = [
                            data.data.provinceCode,
                            data.data.cityCode,
                            data.data.districtCode
                        ]
                        if (data.data.bookingRule != null){
                            this.bookingRule = data.data.bookingRule
                        }
                    }
                })
            }
        },
        created() {
            axios.get(`/pca-code.json`).then( ({data}) => {
                this.options = data
            })
            this.getHospitalInfo()
        }
    })

</script>
</body>
</html>